<template>
	<uni-search-bar @confirm="search" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear" placeholder="请输入查询内容"></uni-search-bar>
	<view v-for="(item, index) in products">
		<uni-card :title="item.name" :id="item.id" class="card" padding="10px 0" @click="proShow(index)">
			<image :src="item.image" style="margin: 0 auto"></image>
			<div class="ellipsis" style="width: 100%; height: 30px; line-height: 30px">
				<!-- <text class="uni-body uni-mt-5"></text> -->
				{{ item.addesc }}
			</div>
			<div style="line-height: 50rpx; margin-top: 8rpx; width: 100%; border-top: 1px solid #dcdcdc; display: flex; flex-direction: column">
				<div style="">
					<text>{{ $t('shop.contact') }}：</text>
					<text>{{ item.adname }}</text>
				</div>
				<div style="">
					<text>{{ $t('shop.telphone') }}：</text>
					<text>{{ item.phone }}</text>
				</div>
			</div>
		</uni-card>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchValue: '',
			products: []
		};
	},
	onReady() {
		this.getProducts();
	},
	methods: {
		getProducts() {
			this.$request(this.$api.productList, {}).then((res) => {
				this.products = res.result;
				console.log(this.products);
			});
		},

		proShow(e) {
			// console.log(e)
			// console.log(this.products[e].id);
			uni.navigateTo({
				url: '/pages/shop/index?id=' + this.products[e].id
			});
		},

		search(res) {
			uni.showToast({
				title: '搜索：' + res.value,
				icon: 'none'
			});
		},
		input(res) {
			console.log('----input:', res);
		},
		clear(res) {},
		blur(res) {
			uni.hideKeyboard();
		},
		focus(res) {},
		cancel(res) {}
	}
};
</script>

<style lang="scss">
.card {
	// text-align: center;
	/* width: 100%; */
	image {
		width: 100%;
	}

	.card_action {
		width: 100%;
	}
}
.ellipsis {
	overflow: hidden; //超出的文本隐藏
	text-overflow: ellipsis; //溢出用省略号显示
	white-space: nowrap; //溢出不换行
}
</style>
